Client Components

拡張子は.client.js

従来のReactのComponent

状態が持てる

browser-only APIにアクセス可能

envent handlingなどのインタラクティブな操作が可能

client componentsのファイルでは、server componentsをimportできない

子にServer Componentsを持つことはできない

しかし、childrenとして持つことはできる

code:ok.js

import ClientComponent from './ClientComponent.client.js'

import ServerComponent2 from './ServerComponentB.server.js'

const ServerComponent1 = () => {

return (

</ClientComponent>

)

}

状態を持つなど、Server Componentsを使えない場合はClient Componentsを使う

'use client'を付けないとけない

「開発中に一時的にclient componentsに切り替えたい」ということはよくある

開発者が必要なのは「このComponentが今どっちなのか」ということだけ

内部でhooksを使ってなかったら自動でserver componentsになってくればいい

hooksを使えば自動でclient componentになればいい

現時点で、「server componentsなのに内部でhooksを使った」ということは起きない

実行時エラーとlintで防げている

その逆ができていない

「無意味にClient Componentnsを使っている」という状況が起きうる

'use client'を消し忘れるとかで